<template>
    <div class="spu">
        <Category :screen="screen"></Category>
        <el-card>
            <div v-show="screen == 0">
                <el-button type="primary" icon="Plus" :disabled="!CategoryStore.category3Id"
                    @click="screen = 1">添加SPU</el-button>
                <el-table border style="margin-top:10px;" :data="spuAttr">
                    <el-table-column label="序号" type="index" align="center" width="100"></el-table-column>
                    <el-table-column prop="spuName" label="SPU名称"></el-table-column>

                    <el-table-column prop="description" show-overflow-tooltip label="SPU描述"></el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button type="primary" icon="Plus" size="small" @click="addSku(scope.row)"></el-button>
                            <el-button type="info" icon="Edit" size="small" @click="editSpuInfo(scope.row)"></el-button>
                            <el-button type="warning" icon="Warning" size="small"
                                @click="showSkuList(scope.row.id)"></el-button>
                            <el-button type="danger" icon="Delete" size="small"></el-button>

                        </template>
                    </el-table-column>

                </el-table>
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[3, 5, 7]"
                    @change="changeSize" layout=" prev, pager, next, jumper,->,total, sizes" :total="total">
                </el-pagination>
            </div>
            <SpuForm ref="spu" v-show="screen == 1" @changeScreen="changeScreen"></SpuForm>
            <SkuForm ref="sku" v-show="screen == 2" @changeScreen="changeScreen"></SkuForm>
            <el-dialog v-model="dialogTableVisible" title="SKU列表" width="800">
                <el-table :data="skuArr">
                    <el-table-column prop="skuName" label="sku名字" width="150" />
                    <el-table-column prop="price" label="sku价格" width="200" />
                    <el-table-column prop="weight" label="sku重量" />
                    <el-table-column label="sku图片">
                        <template #default="scope">
                            <img :src="scope.row.skuDefaultImg" alt="">
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import useCategoryStore from '@/stores/category'
import { reqSpuInfoList, reqSkuList } from '@/api/product/spu/index'
import SkuForm from './SkuForm.vue'
import SpuForm from './SpuForm.vue'
const CategoryStore = useCategoryStore()
const spuAttr = ref([])
const currentPage = ref(1)
const pageSize = ref(3)
const total = ref()
const screen = ref(2)
const spu = ref()
const sku = ref()
watch(() => CategoryStore.category3Id, () => {
    if (CategoryStore.category3Id) {
        getSpuInfoList()
    } else {
        spuAttr.value = []
    }
})
const getSpuInfoList = async () => {
    const res = await reqSpuInfoList(currentPage.value, pageSize.value, CategoryStore.category3Id)
    if (res.code == 200) {
        spuAttr.value = res.data.records
        total.value = res.data.total
    }
}
const changeSize = () => {
    getSpuInfoList()
}
const changeScreen = (num: number) => {
    screen.value = num
}
const editSpuInfo = (row: any) => {
    spu.value.getSpuInfo(row)
    screen.value = 1
}
const addSku = (row: any) => {
    screen.value = 2
    sku.value.initSkuData(CategoryStore.category1Id, CategoryStore.category2Id, row)
}
const skuArr = ref([])
const dialogTableVisible = ref(false)
const showSkuList = async (id: string) => {
    const res = await reqSkuList(id)
    if (res.code == 200) {
        skuArr.value = res.data
    }
    dialogTableVisible.value = true
}
</script>

<style lang="scss" scoped></style>